<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>听说读写</title>
    <th:block th:include="/pc/include :: header('听说读写')"/>
    <link th:href="@{/pc/css/index.css}" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/my.css}">
</head>
<body style="background-color: #F5F5F5">
<div id="top">
    <div class="top_1">
        <div class="top_1-2">
            <ul>
                <li class="n1">
                    <span th:if="!${session.userInfo}">
                        <a href="/login?isPc=pc">登录</a>
                    </span>
                    <span th:if="${session.userInfo}" style="color: #FB6302">
                        <img th:src="(${#strings.isEmpty(session.userInfo.avatar)}) ? @{/img/profile.jpg} : @{${session.userInfo.avatar}}"
                             class="img-circle"
                             style="width: 25px;height: 25px"
                             alt="User Image">&nbsp;&nbsp;[[${session.userInfo.userName}]]
                    </span>
                </li>
                <li class="n1">
                    <span>
                        <a href="/pc/index">首页</a>
                    </span>
                </li>
                <li class="n1">
                    <span>
                        <a href="/pc/list?pageNum=1">商品</a>
                    </span>
                </li>
                <li class="n1">
                    <span th:if="!${session.userInfo}">
                        <a href="/login?isPc=pc">登录</a>
                    </span>
                </li>
                <li class="n1">
                    <span th:if="${session.userInfo}">
                        <a href="/pc/car">购物车</a>
                    </span>
                </li>
                <li class="n1">
                    <span th:if="${session.userInfo}">
                        <a href="/pc/center">个人中心</a>
                    </span>
                </li>
                <li class="n1">
                    <a th:if="${session.userInfo}" href="/logout">
                        <i class="fa fa-sign-out"></i> 退出登录</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 search-collapse">
        <form id="formId">
            <div class="select-list">
                <ul style="margin-left: 755px;">
                    <li>
                        <input style="width: 324px;" type="text" name="name" id="name" th:value="${name}"/>
                    </li>
                    <li>
                        <a class="btn btn-primary btn-rounded btn-sm" onclick="petSearch()"><i
                                class="fa fa-search"></i>&nbsp;搜索</a>
                        <a class="btn btn-warning btn-rounded btn-sm" onclick="myReset()"><i
                                class="fa fa-refresh"></i>&nbsp;重置</a>
                    </li>
                </ul>
            </div>
        </form>
    </div>
</div>

<div id="head2" style="height: auto;margin-top: 0px;">
    <div class="viode" style="height: auto;margin-left: 100px;">
        <div th:if="${#lists.isEmpty(petInfos)}" class="lei"
             style="height: 80px; margin-left: 9px; width: 100%; padding-top: 29px;">
            <span>暂无数据</span>
        </div>

        <div class="lei_ting" style="margin-left: 9px;"
             th:if="${not #lists.isEmpty(petInfos) && typeId == '1'}"
             th:each="item,iterStat : ${petInfos}" th:onclick="|window.location.href='/pc/lsrw/details?id=${item.id}'|">
            <div style="text-align: left;margin-top: 8px;margin-left: 8px;font-size: 14px;">
                <apan style="color: #5FB878;">听</apan>
                <h3 style="margin-top: 8px;">[[ ${item.name} ]]</h3>
            </div>
            <div style="margin: 20px;">
                <audio class="kv-preview-data file-preview-audio" controls="" style="width: 100%; height: 30px;">
                    <source th:src="${item.songUrl}" type="audio/mpeg">
                    <div class="file-preview-other" style="height: 52px;">
                        <span class="file-other-icon"><i class="glyphicon glyphicon-file"></i></span>
                    </div>
                </audio>
            </div>
            <div style="text-align: left;margin-left: 20px;color: #B0B0B0;">
                <apan class="moreLine_3" th:text="${item.abstractStr}"></apan>
            </div>
            <div style="text-align: right; font-size: 10px;margin-top: 20px;margin-right: 10px;color: #B0B0B0;">
                时间：<small>[[${#dates.format(item.addTime, 'yyyy-MM-dd HH:mm:ss')}]]</small>
            </div>
        </div>

        <div class="lei_ting" style="margin-left: 9px;height: 240px;"
             th:if="${not #lists.isEmpty(petInfos) && typeId == '2'}"
             th:each="item,iterStat : ${petInfos}" th:onclick="|window.location.href='/pc/lsrw/details?id=${item.id}'|">
            <div style="text-align: left;margin-top: 8px;margin-left: 8px;font-size: 14px;">
                <apan style="color: #5FB878;">说</apan>
                <h3 style="margin-top: 8px;">[[ ${item.name} ]]</h3>
            </div>
            <div style=" display: flex; justify-content: flex-start;">
                <div style="float: left;margin-left: 8px;">
                    <video class="kv-preview-data file-preview-video" controls=""
                           style="width: 213px !important; height: 160px !important;">
                        <source th:src="${item.videoUrl}" type="video/mp4">
                        <div class="file-preview-other">
                            <span class="file-other-icon"><i class="glyphicon glyphicon-file"></i></span>
                        </div>
                    </video>
                </div>
                <div style="text-align: left;margin-left: 20px;margin-right: 20px;color: #B0B0B0;">
                    <apan class="moreLine_6" th:text="${item.abstractStr}"></apan>
                </div>
            </div>
            <div style="text-align: right; font-size: 10px;margin-top: -27px;margin-right: 10px;color: #B0B0B0;">
                时间：<small>[[${#dates.format(item.addTime, 'yyyy-MM-dd HH:mm:ss')}]]</small>
            </div>
        </div>

        <div class="lei_ting" style="margin-left: 9px;height: 240px;"
             th:if="${not #lists.isEmpty(petInfos) && typeId == '3'}"
             th:each="item,iterStat : ${petInfos}" th:onclick="|window.location.href='/pc/lsrw/details?id=${item.id}'|">
            <div style="text-align: left;margin-top: 8px;margin-left: 8px;font-size: 14px;">
                <apan style="color: #5FB878;">读</apan>
                <h3 style="margin-top: 8px;">[[ ${item.name} ]]</h3>
            </div>
            <div style=" display: flex; justify-content: flex-start;">
                <div style="float: left;margin-left: 8px;">
                    <img th:src="${item.docUrl}" style="width: 213px !important; height: 160px !important;">
                </div>
                <div style="text-align: left;margin-left: 20px;margin-right: 20px;color: #B0B0B0;">
                    <apan class="moreLine_6" th:text="${item.abstractStr}"></apan>
                </div>
            </div>
            <div style="text-align: right; font-size: 10px;margin-top: -27px;margin-right: 10px;color: #B0B0B0;">
                时间：<small>[[${#dates.format(item.addTime, 'yyyy-MM-dd HH:mm:ss')}]]</small>
            </div>
        </div>

        <div class="lei_ting" style="margin-left: 9px;height: 168px;"
             th:if="${not #lists.isEmpty(petInfos) && typeId == '4'}"
             th:each="item,iterStat : ${petInfos}" th:onclick="|window.location.href='/pc/lsrw/details?id=${item.id}'|">
            <div style="text-align: left;margin-top: 8px;margin-left: 8px;font-size: 14px;">
                <apan style="color: #5FB878;">写</apan>
                <h3 style="margin-top: 8px;">[[ ${item.name} ]]</h3>
            </div>
            <div style="text-align: left;margin-left: 20px;margin-right: 20px;color: #B0B0B0;height: 52px;">
                <apan class="moreLine_3" th:text="${item.abstractStr}"></apan>
            </div>
            <div style="text-align: right; font-size: 10px;margin-top: 20px;margin-right: 10px;color: #B0B0B0;">
                时间：<small>[[${#dates.format(item.addTime, 'yyyy-MM-dd HH:mm:ss')}]]</small>
            </div>
        </div>

    </div>
    <div class="head2_1" style="width: 144px;height: auto;margin-top: 20px;margin-left: -77px;">
        <div class="head2_1-1">
            <ul>
                <li th:class="${typeId == '1'} ? |selected|"
                    onclick="window.location.href='/pc/tlist?pageNum=1&typeId=1'">听
                </li>
                <li th:class="${typeId == '2'} ? |selected|"
                    onclick="window.location.href='/pc/tlist?pageNum=1&typeId=2'">说
                </li>
                <li th:class="${typeId == '3'} ? |selected|"
                    onclick="window.location.href='/pc/tlist?pageNum=1&typeId=3'">读
                </li>
                <li th:class="${typeId == '4'} ? |selected|"
                    onclick="window.location.href='/pc/tlist?pageNum=1&typeId=4'">写
                </li>
            </ul>
        </div>
    </div>
    <div class="posts-nav-wrap" style="height: 98px;">
        <ul class="posts-nav">
            <li class="previous" th:if="${currentPageNUm != 1}">
                <a th:href="@{/pc/tlist(pageNum=${nextPageNUm - 2 == 0 ? 1:nextPageNUm - 2},typeId=${typeId},name=${name})}"
                   class="previous" style="margin-right: -881px;margin-top: 15px;">←</a>
            </li>
            <li class="next" th:if="${currentPageNUm != totalPage && not #lists.isEmpty(petInfos)}">
                <a th:href="@{/pc/tlist(pageNum=${nextPageNUm},typeId=${typeId},name=${name})}"
                   class="next">←</a>
            </li>
        </ul>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">


    function show7(t) {
        var div = t.parentNode;
        var div2 = div.children[1];
        div2.style.borderColor = "#FF6700";
        div2.style.backgroundColor = "#FF6700";
        div2.style.color = "white";
    }

    function yincang(id) {
        document.getElementById(id).style.display = "none";
    }

    function yincang3(t) {
        var div = t.parentNode;
        var div2 = div.children[1];
        div2.style.borderColor = "white";
        div2.style.backgroundColor = "#050505";
        div2.style.color = "white";
    }

    function petSearch() {
        var name = $("#name").val();
        window.location.href = '/pc/list?pageNum=1&name=' + name;
    }

    function myReset() {
        $("#name").val("");
        window.location.href = '/pc/list?pageNum=1';
    }
</script>

</body>

</html>
